<template>
  <div class="cart">
    <!-- 页头 -->
    <l-header title="商城"></l-header>

    <div class="good" v-for="(item,index) in cart" :key="item.id">
      {{item.title}}
      <div class="right">
        <i class="cubeic-remove" @click="countMinus(index)"></i>
        <span>{{item.cartCount}}</span>
        <i class="cubeic-add" @click="countAdd(index)"></i>
      </div>
    </div>
    <div>总价 {{total}}</div>

    <cube-button :disabled="true" v-if="total<minTotal">还差{{minTotal-total}}可以购买</cube-button>
    <cube-button v-else>
      下单
      <span v-if="!token">(需要登录)</span>
    </cube-button>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      minTotal: 1000 //小于这个值不可购买
    };
  },
  created() {},
  methods: {
    countAdd(index) {
      this.$store.commit("countAdd", index);
    },
    countMinus(index) {
      this.$store.commit("countMinus", index);
    }
  },
  computed: {
    // cart(){
    //   console.log('this.$store.cart;',this.$store.state.cart);
    //   return this.$store.state.cart;
    // },
    ...mapState({
      cart: state => state.cart,
      token: state => state.token
    }),
    ...mapGetters({
      total: "total"
    })
  }
};
</script>

<style lang="scss" scoped>
.cart {
  background: #fff;
}
.good {
   padding: 10px;
  text-align: left; 
  .right {
    float: right;
  }
   
  i {
    font-size: 18px;
  }
}
</style>